<template>
  <div class="goodslist">
    <van-nav-bar title="商品列表" left-arrow @click-left="onClickLeft" />
    <van-empty v-if="goodsList.length==0" description="该列表下没有商品哦~" />
    <van-card
      v-else
      v-for="(item,index) in goodsList"
      :key="index"
      :price="item.price"
      desc="描述信息"
      :title="item.goodsname"
      :thumb="'http://localhost:3000'+item.img"
      @click="goodsinfo(item.id)"
    >
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button type="primary" size="small" @click.stop="add(item.id)">
          <van-icon name="shopping-cart-o" />
        </van-button>
      </template>
    </van-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsList: [],
      userInfo: {},
      flag: false
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getData(this.$route.params.sid);
  },
  methods: {
    getData(sid) {
      this.$http.get("/getcategoods", { params: { sid } }).then(res => {
        this.goodsList = res.data.list.list;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goodsinfo(id) {
      this.$router.push("/goodsinfo/" + id);
    },
    add(id) {
      if (JSON.parse(localStorage.getItem("userInfo"))) {
        this.$http
          .post("cartadd", { uid: this.userInfo.uid, goodsid: id, num: 1 })
          .then(res => {
            this.$toast({
              message: "添加成功",
              position: "bottom"
            });
          });
      } else {
        this.$toast.fail("请先登录");
      }
    }
  }
};
</script>
<style>
.goodslist .van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
}
</style>